<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script>
        let app = {
            type: 'div',
            props: {
                className: 'app',
                children: [
                    {
                        type: 'span',
                        props: {
                            children: ['杨紫龙']
                        }
                    },
                    {
                        type: 'p',
                        props: {
                            children: [
                                {
                                    type: 'b',
                                    props: {
                                        children: ['react']
                                    }
                                }
                            ]
                        }
                    }
                ]
            }
        }

        function render(jsx, root) {
            function createElement(jsx, parent) {
                console.log(jsx, parent)
                let cur = null
                if(typeof jsx === 'string') {
                    cur = document.createTextNode(jsx)
                }
                else{
                    let {type, props} = jsx
                    cur = document.createElement(type)
                    Object.keys(props).map(item => {
                        switch(item) {
                            case 'className':
                                cur.setAttribute('class', props[item])
                                break;
                            case 'children':
                                if(Array.isArray(props[item])){
                                    props[item].map(val => {
                                        createElement(val, cur)
                                    })
                                }
                        }
                    })
                }
                parent.append(cur)
            }
            createElement(jsx, root)
        }

        render(app, document.querySelector('#root'))
    </script>
</body>
</html>